import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Table, Button, Card, Radio, Modal,Icon,Row,Col,Divider,message,Input
} from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import styles from './style.less';
import moment from 'moment';
import docCookies from "../../../common/DocCookies";

const Search = Input.Search;
@connect(state => ({
  contentManager: state.contentManager,
}))
export default class LiveList extends PureComponent {
  state = {
    pageNo:1,
    pageSize:10,
    total:0,
    rsId:docCookies.getItem("rsId"),

    spreadListData:[]
  };

  ////初始化渲染后触发 整个过程只调用一次
  componentDidMount() {
    this.loadCouponInfo();
  }

  loadCouponInfo(searchText){
    const { dispatch } = this.props;
    const pageNo = this.state.pageNo ;
    const pageSize = this.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      rsId:this.state.rsId,
      spreadType:0,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    if(searchText) params.searchText=searchText;
    dispatch({
      type: 'contentManager/fetchListSpreadForShake',  //请求的action
      payload:params,
      callback:(data) =>{
        this.setState({
          spreadListData: data.list,
          pageNo:data.pageNo,
          pageSize:data.pageSize,
          total:data.total,
        });
      }
    });

  }

  delSpreadInfo (id){
    const { dispatch } = this.props;
    const params = {
      id:id,
      spreadStatus:1
    };

    Modal.confirm({
      title: '提示',
      content: '您确定删除该活动吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'contentManager/fetchDelSpread',  //请求的action
          payload: params,
          callback: (response) => {
            if(response.errorCode != 0){
              this.loadCouponInfo()
            }
            message.success(response.msg)
          }
        });
      }
    })
  }

  turnToAdAddPage(id,showDetail){
    const { dispatch} = this.props;
    const param = {
      path:'AdAdd'
    }
    if(id) {
      param.spreadId = id;
    }
    if(showDetail){
      param.showDetail = showDetail;
    }
    dispatch({
      type: 'contentManager/fetchLiveAdd',
      payload:param
    });
  }
  handleTableChange = (page, pageSize) => {
    this.state.pageNo = page;
    this.setState({
      pageNo:page,
      pageSize:pageSize
    });
    this.loadCouponInfo();
  }

  handleSearch = (value) => {
    this.loadCouponInfo(value)
  }

  render() {
    const { pageSize ,total,pageNo } = this.state;

    const columns = [{
      title: '广告标题',
      dataIndex: 'spreadTitle',
      key: 'spreadTitle',
      width:'30%'
    },{
      title: '商家名称',
      dataIndex: 'sellerName',
      key: 'sellerName',
      width:'15%'
    }, {
      title: '摇摇次数',
      dataIndex: 'shakeCount',
      key: 'shakeCount',
      width:'7%'
    }, {
      title: '页面展示数',
      dataIndex: 'yeCount',
      key: 'yeCount',
      width:'7%'
    }, {
      title: '摇一摇有效期',
      dataIndex: 'startTime',
      key: 'startTime',
      width:'20%',
      render: (text, record) => (
        <span>
          {record.startTime} 至 {record.endTime}
        </span>
      )
    }, {
      title: '状态',
      dataIndex: 'spreadStatus',
      key: 'spreadStatus',
      width:'7%'
    }, {
      title: '操作',
      width:'10%',
      render: (text, record) => (
        <span>
          <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record.id,false)} >编辑</a>
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.turnToAdAddPage(record.id,true)} >详情</a>
          <Divider type="vertical" />
          <a href="javascript:void(0)" onClick={() => this.delSpreadInfo(record.id)} >删除</a>
        </span>
      ),
    }];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
      onChange:this.handleTableChange
    };

    const extraCard = (
      <div>
        <Search
          placeholder="请输入广告标题"
          onSearch={(value) => this.handleSearch(value)}
          style={{ width: 200 }}
          enterButton
        />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Button type="primary" icon="plus" style={{ float:'right' }} onClick={() => this.turnToAdAddPage()}>添加</Button>
      </div>
    )

    return (
          <Card title="广告列表" extra={extraCard}>
            <Row gutter={16}>
              <Col className="gutter-row" span={24}>
                <Table dataSource={this.state.spreadListData} columns={columns} style={{ width: '100%' }}
                       pagination={paginationProps}  />
              </Col>
            </Row>
          </Card>
    );
  }
}
